<template>
    <div style="position:relative;height: 100%;">
        <div style="position:absolute;z-index: 10;top: 3px;right: 2px">
            <div>
                <el-button :icon="getIcon('plus')" circle class="button-auto-resize" @click="addNewModule" />
            </div>
        </div>
        <el-row class="response" style="height: 100%;padding: 10px;">
            <el-scrollbar style="height: 100%;width: 100%;" ref="scrollbarRef">
                <div v-if="response.length === 0">
                    <div style="width:50%;display:block;margin:10% auto 0 auto;text-align: center">
                        暂无数据
                    </div>
                </div>
                <div v-else>
                    <el-row>
                        <el-col :span="6" v-for="(resp, index) in response" :key="index" style="padding:0 3px;"
                            :id="`response_${index}`">
                            <el-card :body-style="{ padding: '0px' }" shadow="hover"
                                style="margin-bottom:5px;min-width: 220px" ref="dcRef">
                                <el-row>
                                    <el-col :span="1">
                                        <div class="removeButton" @click.prevent="remove(index)"
                                            style="z-index: 999;" />
                                    </el-col>
                                    <el-col :span="23">
                                        <el-form :model="resp" spellcheck="false" :hide-required-asterisk="true"
                                            class="resp-info">
                                            <el-form-item label="返回值名称" prop="name">
                                                <el-input class="input-auto-resize" v-model="resp.name"
                                                    @blur="checkName(resp.name, index)" />
                                            </el-form-item>
                                            <el-form-item label="返回值类型" prop="type">
                                                <div style="display: flex;padding: 0 10px;width: 100%;">
                                                    <div style="display: flex;width: 50%">
                                                        <el-radio v-model="resp.type" label="string">string</el-radio>
                                                    </div>
                                                    <div style="display: flex;width: 50%;">
                                                        <el-radio v-model="resp.type" label="int">int</el-radio>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item label="返回值说明" prop="comment">
                                                <el-input class="input-auto-resize" v-model="resp.comment" />
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-scrollbar>
        </el-row>
    </div>
</template>

<script setup>
import { useElMessage } from "@usehook"
import { getIcon } from "@/utils/tools"

let response = $ref([])
const scrollbarRef = $ref(null)

const checkDupIndex = () => {
    for (let index in response) {
        for (let index2 in response) {
            if (index !== index2 && response[index].name === response[index2].name) {
                const dupIndex = []
                dupIndex.push(parseInt(index) + 1)
                dupIndex.push(parseInt(index2) + 1)
                return dupIndex.sort().join("、")
            }
        }
    }
    return null
}
const addNewModule = () => {
    const rejIndex = checkDupIndex()
    if (rejIndex) {
        useElMessage.error("存在相同名称的项:" + rejIndex + ", 请调整后添加")
        return
    }
    let rej = false;
    response.forEach((e) => {
        if (!e.name || !e.type || !e.comment) {
            rej = true
        }
    })
    if (rej) {
        useElMessage.error("存在未编辑完成的项,请完成后再添加新的项")
        return
    }
    response.push({ name: "", type: "string", comment: "" })

    nextTick(() => {
        scrollbarRef.scrollTo({ top: document.getElementById("response_" + (response.length - 1)).offsetTop, behavior: "smooth" })
    })
}
const checkName = (name, index) => {
    let rejIndex = null
    for (let respIndex in response) {
        if (name === response[respIndex].name && parseInt(index) !== parseInt(respIndex)) {
            const dupIndex = []
            dupIndex.push(parseInt(respIndex) + 1)
            dupIndex.push(parseInt(index) + 1)
            rejIndex = dupIndex.sort().join("、")
            useElMessage.error("存在相同名称的项, 序号" + rejIndex + ", 请调整后添加")
            return
        }
    }
}
const remove = (index) => {
    response.splice(index, 1)
}
const save = () => {
    return response
}
const set = (val) => {
    response = val ? JSON.parse(val) : []
}

defineExpose({
    save, set, checkDupIndex
})


</script>

<style lang="scss">
.response .el-col-4 {
    @media screen and (min-width: 200px) and (max-width: 1500px) {
        width: 20%;
    }
}
</style>

<style scoped>
:deep(.el-card__header) {
    padding: 10px 10px;
    height: 40px;
}

:deep(.el-form-item__label) {
    text-align: center;
    padding-left: 10px;
}

:deep(.el-card__body .el-form-item) {
    padding-top: 6px;
    height: 35px;
}

:deep(.el-form-item__content) {
    margin-right: 10px;
}

:deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
}

:deep(.el-loading-mask) {
    border-radius: 5px;
    border-bottom: none;
    border-right: none;
}

:deep(.el-scrollbar__bar.is-vertical) {
    width: 0;
}

:deep(.el-radio__label) {
    font-size: var(--font-size) !important;
    padding-left: 5px !important;
}

:deep(.removeButton) {
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #b7f4d8;
    width: 4px;
    height: calc(122px + var(--font-size));
}

:deep(.resp-info .el-form-item__label) {
    width: calc(var(--font-size)* 5 + 25px);
}
</style>